import 'package:flutter/material.dart';

/// 可复用的Tab组件
class CustomTabView extends StatefulWidget {
  final List<TabItem> tabs;
  final Color? tabBarColor;
  final Color? indicatorColor;
  final Color? labelColor;
  final Color? unselectedLabelColor;
  final double? tabBarHeight;
  final bool? isScrollable;

  const CustomTabView({
    super.key,
    required this.tabs,
    this.tabBarColor,
    this.indicatorColor,
    this.labelColor,
    this.unselectedLabelColor,
    this.tabBarHeight = 48.0,
    this.isScrollable = false,
  });

  @override
  State<CustomTabView> createState() => _CustomTabViewState();
}

class _CustomTabViewState extends State<CustomTabView>
    with SingleTickerProviderStateMixin {
  late TabController _tabController;
// 初始化tab控制器（生命周期中进行）
  @override
  void initState() {
    super.initState();
    _tabController = TabController(
      length: widget.tabs.length,
      vsync: this,
    );
  }

// 释放TabController资源（生命周期中进行）
  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        // Tab栏
        Container(
          width: double.infinity, // 宽度100%
          height: widget.tabBarHeight,
          color: widget.tabBarColor ?? Theme.of(context).colorScheme.surface,
          child: TabBar(
            controller: _tabController,
            dividerColor: Colors.transparent,
            tabs: widget.tabs.map((tab) => Tab(text: tab.title)).toList(),
            indicatorColor:
                widget.indicatorColor ?? Theme.of(context).primaryColor,
            // indicatorColor: Colors.transparent, // 不设置下面指示器
            labelColor: widget.labelColor ?? Theme.of(context).primaryColor,
            unselectedLabelColor: widget.unselectedLabelColor ??
                Theme.of(context)
                    .textTheme
                    .bodyMedium
                    ?.color
                    ?.withValues(alpha: 0.6), // 设置透明度
            isScrollable: false, // 顶部tab是否能滚动
            labelStyle: const TextStyle(
              fontSize: 16,
              fontWeight: FontWeight.w600,
            ),
            unselectedLabelStyle: const TextStyle(
              fontSize: 16,
              fontWeight: FontWeight.normal,
            ),
          ),
        ),

        // Tab内容区域
        Expanded(
          child: TabBarView(
            controller: _tabController,
            // physics: const NeverScrollableScrollPhysics(), // 禁用手势切换
            children: widget.tabs.map((tab) => tab.content).toList(),
          ),
        ),
      ],
    );
  }
}

/// Tab项数据模型
class TabItem {
  final String title;
  final Widget content;

  const TabItem({
    required this.title,
    required this.content,
  });
}

/// 预定义的Tab内容组件示例
class TabContentExample extends StatelessWidget {
  final String title;
  final Color? color;

  const TabContentExample({
    super.key,
    required this.title,
    this.color,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      color: color ?? Colors.grey[100],
      padding: const EdgeInsets.all(20),
      child: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Icon(
              Icons.star,
              size: 64,
              color: Theme.of(context).primaryColor,
            ),
            const SizedBox(height: 16),
            Text(
              title,
              style: const TextStyle(
                fontSize: 24,
                fontWeight: FontWeight.bold,
              ),
            ),
            const SizedBox(height: 8),
            Text(
              '这是 $title 的内容区域',
              style: const TextStyle(
                fontSize: 16,
                color: Colors.grey,
              ),
              textAlign: TextAlign.center,
            ),
          ],
        ),
      ),
    );
  }
}
